<template>
  <t-link
    v-permission="['system:order:design-extension']"
    theme="primary"
    @click="handleOpenDialog('update', { orderId: props.orderId, approveType: props.approveType })"
  >
    转设计延期
  </t-link>
  <!-- 自定义对话框 -->
  <custom-dialog
    ref="customDialogRef"
    v-slot="{ formData }"
    :api-map="{ update: transformDesignExtension }"
    header="申请转设计延期"
    @request-success="handleDialogRequestSuccess"
  >
    <t-form-item label="审批类型" name="type">
      {{ dictionaryStore.analysis('order_approval_type', props.approveType) }}
    </t-form-item>
    <t-form-item
      v-if="['2'].includes(props.approveType)"
      label="申请日期"
      name="extensionTime"
      :rules="[{ required: true, message: '请选择申请日期' }]"
    >
      <t-date-picker 
        allow-input
        v-model:value="formData.extensionTime"
        clearable
        value-type="time-stamp"
        placeholder="请选择申请日期"
        @change="
            (value) => {
              if (value) {
                value = dayjs(value).format('YYYY-MM-DD 23:59:59');
                
              }
              formData.extensionTime = value ? value : undefined;
            }
          "
        style="width: 100%"
      />
    </t-form-item>
    <t-form-item
      label="申请备注"
      name="extensionRemark"
      :rules="[{ required: true, message: '请输入申请备注' }]"
    >
      <t-textarea v-model:value="formData.extensionRemark" placeholder="请输入申请备注" />
    </t-form-item>
  </custom-dialog>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { MessagePlugin } from 'tdesign-vue-next';
import { PropType, ref, useTemplateRef } from 'vue';

import {
  transformDesignExtension,
} from '@/api/approve/approve';
import { getUserListByCompanyIdAndRoleId } from '@/api/system/user';
import CustomDialog from '@/components/custom/dialog/index.vue';
import { useDictionaryStore, useUserStore } from '@/store';

// 字典仓库
const dictionaryStore = useDictionaryStore();
// props
const props = defineProps({
  // 订单id
  orderId: {
    type: Number,
    required: true,
  },
  // 审批类型
  approveType: {
    type: String,
    required: true,
  },
});
// emits
const emits = defineEmits(['requestSuccess']);

// 自定义对话框ref
const customDialogRef = useTemplateRef('customDialogRef');
// 处理打开对话框
const handleOpenDialog = (mode: 'create' | 'read' | 'update', params: Record<string, any>) => {
  customDialogRef.value.open(mode, params);
};
// 处理对话框请求成功
const handleDialogRequestSuccess = (result: Record<string, any>) => {
  emits('requestSuccess', result);
};
</script>
